<template>
  <!-- 竞猜 -->
  <div>
    <div class="pageWrap one">
      <div class="title">基本项设置</div>
      <el-form :model="basicData" class="demo-form-inline">
        <el-form-item label="竞猜时间" class="long">
          <el-date-picker
            v-model="basicData.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy/MM/dd HH:mm"
            format="yyyy/MM/dd HH:mm"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="竞猜方式" class="short">
          <el-select
            v-model="basicData.type"
            placeholder="请选择"
            @change="basicData.type=='T'?basicData.num==1:''"
          >
            <el-option label="竞猜选手" value="P"></el-option>
            <el-option label="竞猜选手加时间" value="T"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="竞猜类型" class="short">
          <el-select v-model="basicData.num" placeholder="请选择" :disabled="basicData.type=='T'">
            <el-option label="冠军" :value="1"></el-option>
            <el-option label="前三" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分性别竞猜" class="short">
          <el-radio-group v-model="basicData.gender">
            <el-radio label="T">是</el-radio>
            <el-radio label="F">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="竞猜规则" class="half">
          <el-input
            style="width:100%;"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10}"
            placeholder="请输入内容"
            v-model="basicData.rule"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动奖品" class="half">
          <el-select
            filterable
            clearable
            multiple
            v-model="basicData.shopIds"
            default-first-option
            placeholder="请选择"
            style="width:100%;"
          >
            <el-option v-for="item in allGoods" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="display: block;overflow: hidden;width: 100%;">
        <el-button type="primary" @click="saveGuess()">{{basicData.id?'修改':'保存'}}</el-button>
        <el-button type="primary" @click="goLuck()" v-if="basicData.id">竞猜抽奖</el-button>
      </div>
    </div>
    <div class="pageWrap" v-if="basicData.id">
      <el-tabs type="border-card" v-model="tabAct">
        <el-tab-pane label="竞猜选手设置" name="1">
          <guessBA :matchMsg="matchMsg" :GroupList="GroupList"></guessBA>
        </el-tab-pane>
        <el-tab-pane label="竞猜选手成绩" name="2">
          <guessBB :matchMsg="matchMsg"></guessBB>
        </el-tab-pane>
        <el-tab-pane label="竞猜纪录" name="3">
          <guessBC :matchMsg="matchMsg"></guessBC>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import guessBA from "../../../../components/guess/guessB_1";
import guessBB from "../../../../components/guess/guessB_2";
import guessBC from "../../../../components/guess/guessB_3";
export default {
  components: { guessBA ,guessBB,guessBC},
  data() {
    return {
      allGoods: [],
      basicData: {
        startTime: "",
        endTime: "",
        num: 3,
        rule: "",
        type: "P",
        shopId: "",
        gender: "T",
        shopIds: [],
        time: "",
      },
      tabAct: "1",
      matchMsg: {},
      GroupList: [],
    };
  },
  methods: {
    goLuck(){
      this.$router.push({
        path: "/match/extend/guess/luck",
      });
    },
    // 获取商品
    getAllGoods() {
      this.$axios.get("/sbr/shop/getShopKuPic").then((res) => {
        let rr = res.data.data;
        this.allGoods = rr;
        this.getGroupArr();
      });
    },
    // 保存赛事竞猜
    saveGuess() {
      if (this.basicData.time.length > 0) {
        this.basicData.startTime = this.basicData.time[0];
        this.basicData.endTime = this.basicData.time[1];
      } else {
        this.$messsage.error("请设置竞猜时间");
        return false;
      }
      this.basicData.matchId = this.$Base64.decode(
        sessionStorage.getItem("MandA")
      );
      this.basicData.shopId = this.basicData.shopIds.join(",");
      if (!this.basicData.id) {
        this.$axios
          .post("/sbr/match/guess/addGuessMatch", this.basicData)
          .then((res) => {
            this.getMGuess();
            this.$messsage.success("保存成功");
          });
      } else {
        this.$axios
          .post("/sbr/match/guess/updGuessMatch ", this.basicData)
          .then((res) => {
            this.getMGuess();
            this.$message.success("保存成功");
          });
      }
    },
    // 查询赛事竞猜
    getMGuess() {
      this.$axios
        .get(
          "/sbr/match/guess/getGuessByMatchId?matchId=" +
            this.$Base64.decode(sessionStorage.getItem("MandA"))
        )
        .then((res) => {
          let rr = res.data.data;
          if(rr){
          rr.shopIds = rr.shopId.split(",").map((v) => {
            return Number(v);
          });
          rr.time = [rr.startTime, rr.endTime];
          this.basicData = rr;
          let mg = JSON.parse(JSON.stringify(rr));
          mg.groupList.forEach((v) => {
            v.hasTJ = true;
          });
          this.matchMsg = mg;
          }
        });
    },

    // 获取赛事下赛项
    getGroupArr() {
      this.$axios
        .get("/sbr/match/getMatchInfos/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data.matchInfoLists;
          this.GroupList = rr;
          this.getMGuess();
        });
    },
  },
  mounted() {
    this.getAllGoods();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.one {
  margin-bottom: 20px;
}
.title {
  font-size: 18px;
  margin-bottom: 15px;
}
.short {
  width: 33%;
  float: left;
  overflow: hidden;
}
.long {
  width: 100%;
}
.half {
  width: 45%;
  float: left;
  overflow: hidden;
}
.half:last-child {
  margin-left: 5%;
}
.el-form-item {
  overflow: hidden;
  float: left;
}
</style>